{% extends ../base.html %}

{% block head %}
<!-- <script src="/lib/CodeMirror/codemirror.js"></script>
<script src="/lib/CodeMirror/mode/javascript/javascript.js"></script> -->
<!-- <script src="/lib/CodeMirror/mode/markdown/markdown.js"></script> -->
<!-- <script src="/js/string.js"></script>
<script src="/js/array.js"></script> -->
<!-- <link rel="stylesheet" type="text/css" href="/static/lib/bootstrap-tagsinput/bootstrap-tagsinput.css">
<script type="text/javascript" src="/static/lib/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script> -->
<!-- <script src="/static/js/TagEditor.js"></script> -->
<script type="text/javascript" src="/static/lib/csv.js/csv.js"></script>
<script type="text/javascript" src="/static/lib/marked/marked.js"></script>
<script type="text/javascript" src="/static/js/marked-ext.js"></script>
<style>
.CodeMirror {
    width: 60rem;
    font-size:16px;
    height: auto;
}

#markdown-input {
    font-family: monospace;
}

</style>
{% end %}

{% block body %}

    <!--
            {% if 'pathlist' in globals() %}
            <div style="float:right;">
              <a href="/file/archive?id={{id}}">[重新归档]</a>
              <a href="/file/add_child?parent_id={{id}}">[添加子页面]</a>
            </div>
            <div class="row">
              <a href="/file/group">Home</a>
              {% for _path0 in pathlist %}
                / <a href="/file/edit?id={{_path0.id}}">{{_path0.name}}</a>
              {% end %}
              
            </div>
            {% end %}
    -->

    {% include "header.html" %}

    <div style="">
    
    <h3>
        <span id="fileId" style="display:none;">{{file.id}}</span>
        <div style="display:none" id="renameDiv">
            <span><input id="newName"> </input></span> 
            <button onclick="renameFile()">重命名</button>
        </div>
        <div>
            <p><a id="oldName" href="javascript:switchRename()" style="color:blue">{{file.name}}</a></p>
            <p style="font-size:10px;">创建时间:{{file.sctime}} 修改时间:{{file.smtime}}</p>
        <div>
    </h3>

    {% include tags.html %}

    <span id="result" style="color:green"></span>
    
    </div>
    
    <hr/>

    <div>

        <div>
            {% if globals().get("download_csv") %} 
                <form action="/file_edit" method="POST" enctype="multipart/form-data">

                    <a href="/file_edit?option=download&id={{file.id}}">下载CSV</a> 
                    <input type="file" name="file" style="display: inline;"/>
                    <input type="text" name="option" value="upload" class="hide"/>
                    <input name="id" class="hide" value="{{file.id}}"/>
                    <button>上传</button>
                </form>
            {% end %}
        </div>
    </div>

    <form action="/file/update" method="POST">
        <div class="">
            <div class="">
                <div id="edit-btns">
                    <input type="button" class="btn btn-primary" onclick="edit()" value="编辑" />
                    <input type="button" class="btn btn-primary" onclick="medit()" value="移动编辑" />
                </div>
                <div id="edit-div">
                    <button class="btn btn-primary">更新</button>
                    <input type="button" class="btn btn-primary" onclick="preview()" value="预览" />
                    <!-- <a href="/file/upload_file" target="_blank">上传图片</a> -->
                    <input style="display:none" name="option" value="updateContent"/>
                    <input style="display:none" name="id" value="{{file.id}}"/>

                    <input type="button" class="red" onclick="delLink()" value="删除" />
                    <div class="col-md-12">
                        <iframe src="/file/upload_file" style="border:none;width:100%;height:5em;"></iframe>
                    </div>
                </div>
            </div>

            <div style="padding-top:20px;">
                <div id="epiceditor" class="row">
                    <div id="markdown-input-div" class="col-md-6">
                        <textarea id="markdown-input" class="form-control" name="content" rows=50>{{?content}}</textarea>
                    </div>

                    <div id="markdown-output-div" class="col-md-12">

                    </div>
                </div>
            </div>
        </div>
    </form>

<div style="float:left;width:100%;">
{% if 'children' in globals() %}

{% if len(children) > 0 %}
    <h1>子页面</h1>
    <hr/>
{% end %}

<ul>
{% for child in children %}
    <li>
    [{{child.sctime}}] <a href="/file/edit?id={{child.id}}">{{child.name}}</a>
    </li>
{% end %}
</ul>
</div>
{% end %}

<script>
    function switchRename() {
        if ($("#renameDiv").css("display") == "none") {
            $("#oldName").hide();
            $("#renameDiv").css("display", "block");
            $("#newName").val($("#oldName").html());
        } else {
            $("#oldName").show();
            $("#renameDiv").css("display", "none");
        }
    }

    
    function delLink() {
        var r = confirm("确认删除 {{file.name}}?");
        if (r) {
            location.href="/file/update?option=del&id={{file.id}}";
        }
    }

        
    // autosize textarea rows
    
    var related = "{{file.related}}";
    var textContainer = document.getElementById("fileContent");
    function adjustRows(ele) {
        var text = ele.innerHTML;
        var rows = text.count('\n');
        ele.rows = rows + 10;
    }

    function edit() {
        $("#markdown-input-div").removeClass("hide");
        $("#markdown-output-div").removeClass("col-md-12").addClass("col-md-6");
        var height = Math.max(500, $("#markdown-output-div").height());
        $("#markdown-input").css({height:height+"px"});
        $("#edit-div").show();
        $("#edit-btns").hide();
    }

    function medit() {
        $("#markdown-input-div").removeClass("hide").addClass("col-md-12");
        $("#markdown-output-div").removeClass("col-md-12").addClass("hide");
        var height = Math.max(500, $("#markdown-output-div").height());
        $("#markdown-input").css({height:height+"px"});
        $("#edit-div").show();
        $("#edit-btns").hide();
    }
    
    function preview() {
        if (!$("#markdown-input-div").hasClass("hide")) {
            $("#markdown-input-div").addClass("hide");
            $("#markdown-output-div").removeClass("hide").removeClass("col-md-6").addClass("col-md-12");
            $("#edit-div").hide();
            $("#edit-btns").show();
        }
    }
    
    function renameFile() {
        var fileId = $("#fileId").text();
        var oldName = $("#oldName").html();
        var newName = $("#newName").val();
        if (newName) {
            $.post("/file/update", {
                option: "rename",
                fileId: fileId,
                newName: newName
            }, function (msg) {
                var result = JSON.parse(msg);
                if (result.success)
                {
                    switchRename();
                    window.location.reload();
                } else {
                    alert("修改失败, " + result.msg);
                }
            })
        }
    }
        // set marked code highlight function
        // marked.defaults.highlight = highlight;

        function escape(html, encode) {
          return html
            .replace(!encode ? /&(?!#?\w+;)/g : /&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/\n/g, '<br/>')
            .replace(/ /g, '&nbsp;');
        }

    $(function () {
        var old_content = $("#markdown-input-div").val();
        setInterval(function () {
            var input = $("#markdown-input").val();
            // not modified
            if (input == old_content) {
                return;
            }
            if ($("#markdown-output-div").hasClass("hide")) {
                return;
            }
            old_content = input;
            var outtext = marked.parse(input);
            $("#markdown-output-div").html(outtext); 
        }, 200);
        preview();
    })
</script>

{% end %}